/**
* 系统管理 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/reports' }">报告管理</el-breadcrumb-item>
      <el-breadcrumb-item>实验报告</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">{{ headline }}</div>
      <el-form label-width="120px" :model="editForm" :rules="rules" ref="editForm">
        <el-form-item label="实验入参说明" prop="testExplain">
          <el-input size="small" v-model="editForm.testExplain" auto-complete="off" placeholder="在此处填写入参的参数名称和数值">
          </el-input>
        </el-form-item>
        <el-form-item label="实验区域数据" prop="idPhotos">
          <el-upload ref="pictureUploads" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :auto-upload="false" :on-preview="handlePictureCardPreviews" :on-remove="handleRemoves">
            <i slot="default" class="el-icon-plus"></i>
            <!-- <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            <div slot="files" slot-scope="{ files }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreviews(files)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemoves(files)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="dialogVisibles">
            <img width="100%" :src="dialogImageUrls" alt="" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="实验调用算法" prop="testArithmetic">
          <el-select v-model="editForm.testArithmetic" placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="实验结果预览" prop="idPhoto">
          <el-upload ref="pictureUpload" action="https://jsonplaceholder.typicode.com/posts/" list-type="picture-card"
            :auto-upload="false" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
              <span class="el-upload-list__item-actions">
                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span class="el-upload-list__item-delete" @click="handleRemove(file)">
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <!-- 1、预览 -->
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="预览图片" />
          </el-dialog>
        </el-form-item>
        <el-form-item label="实验最终结论" prop="testVerdict">
          <el-input type="textarea" :rows="3" v-model="editForm.testVerdict" placeholder="在此处填写文本结论"></el-input>
        </el-form-item>
      </el-form>
      <div class="dialog-footer">
        <el-button type="primary" :loading="loading" class="accomplish" @click="accomplish('editForm')">完成</el-button>
      </div>
    </el-row>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title: "添加",
        headline: "实验报告",
        editForm: {
          testExplain: "",
          testArithmetic: "",
          testVerdict: "",
        },
        // 实验区域数据上传
        pictureUpload: [],
        dialogImageUrl: "",
        dialogVisible: false,
        // 实验结果预览
        pictureUploads: [],
        dialogImageUrls: "",
        dialogVisibles: false,
        // 算法下拉框的值
        options: [
          {
            value: 1,
            label: "算法1",
          },
          {
            value: 2,
            label: "算法2",
          },
        ],
        // rules表单验证
        rules: {
          testExplain: [
            { required: true, message: "请填写入参说明", trigger: "blur" },
          ],
          testArithmetic: [
            { required: true, message: "请选择算法", trigger: "blur" },
          ],
          testVerdict: [
            { required: true, message: "请填写结论", trigger: "blur" },
          ],
          idPhoto: [{ required: true, message: "请填上传图片", trigger: "blur" }],
          idPhotos: [{ required: true, message: "请填上传图片", trigger: "blur" }],
        },
        userparm: [], //搜索权限
        listData: [], //用户数据
        formInline: {
          page: 1,
          limit: 10,
          varLable: "",
          varName: "",
          token: localStorage.getItem("token"),
        },
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10,
        },
      };
    },
    /**
     * 创建完毕
     */

    created() {
      let data = this.$route.query.row;
      console.log(this.$route.query);
      if (data) {
      }
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      handleRemove(file) {
        // console.log(file);
        let uploadFiles = this.$refs.pictureUpload.uploadFiles;
        for (var i = 0; i < uploadFiles.length; i++) {
          if (uploadFiles[i]["url"] == file.url) {
            uploadFiles.splice(i, 1);
          }
        }
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      handleRemoves(file) {
        let uploadFiles = this.$refs.pictureUploads.uploadFiles;
        console.log(uploadFiles);
        for (var i = 0; i < uploadFiles.length; i++) {
          if (uploadFiles[i]["url"] == file.url) {
            uploadFiles.splice(i, 1);
          }
        }
      },
      handlePictureCardPreviews(file) {
        this.dialogImageUrls = file.url;
        this.dialogVisibles = true;
      },
      accomplish(editData) {
        this.$refs[editData].validate((valid) => {
          if (valid) {
            console.log(this.editForm);
            console.log(this.tableData);
            // deptSave(this.editForm)
            //   .then((res) => {
            //     this.editFormVisible = false;
            //     this.loading = false;
            //     if (res.success) {
            //       this.getdata(this.formInline);
            //       this.$message({
            //         type: "success",
            //         message: "公司保存成功！",
            //       });
            //     } else {
            //       this.$message({
            //         type: "info",
            //         message: res.msg,
            //       });
            //     }
            //   })
            //   .catch((err) => {
            //     this.editFormVisible = false;
            //     this.loading = false;
            //     this.$message.error("公司保存失败，请稍后再试！");
            //   });
          } else {
            return false;
          }
        });
      },
    },
  };
</script>

<style>
  .user-search {
    margin-top: 20px !important;
  }

  .user-search td {
    margin-top: 20px !important;
  }

  .userRole {
    width: 100%;
  }

  .el-table__expanded-cell {
    padding: 0px !important;
    margin: 0px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeclass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }

  .tableStyle {
    margin-top: 20px;
  }

  .dialog-footer {
    display: flex;
    justify-content: center;
  }
</style>